<template>
    <div id="details">
      <div style="width: 100%;height: 10.5rem;background-color: rgba(254, 39, 70, 1);">
        <p style="text-align: center;line-height: 7rem;color: white;">卖家已发货</p>
        <div style="width: 90%;height: 5rem;background-color: white;margin: 0 auto;border: 1px solid rgba(255, 255, 255, 0);box-shadow: 0px 0px 0px 0px rgba(170, 170, 170, 1);border-radius: 5px;">
          <p style="display: flex;justify-content: space-between;">
            <span style="text-align: left;margin-left: 1rem;line-height: 2rem;color: #0050FB;font-size: 12px;">已揽件</span>
            <span style="text-align: right;margin-right: 1rem;line-height: 2rem;color: #999999;font-size: 12px">{{DataList.add_time}}</span>
          </p>
          <p style="font-size: 12px;text-align: left;text-indent: 1rem;margin-left: .5rem;color: #0050FB;">
            <!--【华南市场部三十六部】的收件员【郑明忠】已收件，下-->
            <!--一站是【广东广州集散中心】-->
            【{{kuaidi}}】
          </p>
        </div>
        <div style="width: 100%;height: .5rem;"></div>
        <div style="width: 90%;height: 5rem;background-color: white;margin: 0 auto;">
          <div style="margin: 0 auto;width: 90%;">
            <div style="width: 100%;height: .61rem;"></div>
            <span style="line-height: 1rem;font-size: 12px;margin-top:1rem;font-weight: bold;">收货人：{{name}}</span>
            <span style="line-height: 1rem;font-size: 12px;margin-top:1rem;font-weight: bold;text-indent: 3rem;margin-left: 4rem;">手机号：{{phone}}</span>
          </div>
          <div style="margin: 0 auto;width: 90%;">
            <span style="font-weight: bold;font-size: 12px;">地址：{{consignee}}</span>
          </div>
        </div>
        <div style="width: 100%;height: .61rem;"></div>
        <div style="width: 90%;height: 14rem;background: white;margin: 0 auto;overflow:hidden;">
         <div style="display: flex;overflow: hidden;font-size: 12px;">
           <div style="width: 6rem;height: 6rem;margin-top: 1rem;margin-left: 1rem;border-radius: 5px;"><img :src="imgtitle+DataList.goods_image"  alt=""width="100%"height="100%"></div>
           <div style="margin-top: 1rem;margin-left: 1rem;width: 10rem;">
             <p style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;font-size: 12px;font-weight: bold;">{{DataList.goods_name}}</p>
             <!--<p style="line-height: 3rem;color: rgba(153, 153, 153, 1);">商品规格信息：</p>-->
             <p style="margin-top: 10px;">{{DataList.quantity}} 件</p>
             <div style="width: 100%;height: 10px;"></div>
             <p style="color: rgba(254, 39, 70, 1);"> {{(Number(DataList.gonghuojia))*100/100}} 积分</p>
           </div>
         </div>
          <div style="height: 1rem;width: 100%;"></div>
          <div style="width: 90%;margin: 0 auto;">
            <p style="display: flex;justify-content: space-between;">
            </p>
            <p style="display: flex;justify-content: space-between;">
              <span style="display: block;font-size: 12px;font-weight: bold;">运费：</span>
              <span style="display: block;font-size: 12px;font-weight: bold;">{{DataList.shipping_fee}}</span>
            </p>
            <p style="display: flex;justify-content: space-between;">
              <span style="display: block;font-size: 12px;font-weight: bold;">实际付款：</span>
              <span style="display: block;font-size: 12px;font-weight: bold;">{{Number(DataList.total_price)*100/100}}积分</span>
            </p>
          </div>
        </div>
        <div style="width: 90%;height: 2rem;margin: 0 auto">
          <p style="line-height: 2rem;color: rgba(254, 39, 70, 1);font-weight: bold;">
            订单信息
          </p>
          <div style="display: flex;">
            <div style="width: .8rem;height: .1rem;background-color: rgba(254, 39, 70, 1);margin-right: .3rem;"></div>
            <div style="width: .5rem;height: .081rem;background-color: rgba(254, 39, 70, 1);margin-right: .3rem;"></div>
            <div style="width: .3rem;height: .081rem;background-color: rgba(254, 39, 70, 1);"></div>
          </div>
          <div style="width: 100%;height: 1rem;"></div>
          <div style="width: 100%;height: 12rem;background-color: white;border-radius: 5px;margin: 0 auto;">
            <div style="display: flex;justify-content: space-between;">
              <p style="font-weight: bold;line-height: 3rem;font-size: 12px;margin-left: .5rem;">订单号</p>
              <p style="font-weight: bold;line-height: 3rem;font-size: 12px;margin-right: .5rem;">{{order_parent_sn}}</p>
            </div>
            <div style="display: flex;justify-content: space-between;">
              <p style="font-weight: bold;line-height: 3rem;font-size: 12px;margin-left: .5rem;">支付时间</p>
              <p style="font-weight: bold;line-height: 3rem;font-size: 12px;margin-right: .5rem;">{{DataList.end_time}}</p>
            </div>
            <div style="display: flex;justify-content: space-between;">
              <p style="font-weight: bold;line-height: 3rem;font-size: 12px;margin-left: .5rem;">支付方式</p>
              <p style="font-weight: bold;line-height: 3rem;font-size: 12px;margin-right: .5rem;">积分兑换</p>
            </div>
          </div>
          <div style="width: 100%;height: 2rem;"></div>
        </div>

      </div>
    </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'User-details',
    data(){
      return{
        imgtitle:'http://statics.76sd.com',
        order_parent_sn: this.$route.params.order_parent_sn,
        apiUrl:'order/orderInfo',
        data:{},
        openid:'oEhus5qPt0FvUjLFVIN7jynQVJl8',
        DataList:[],
        List:[],
        apiUrl2:'logistics/kuaidi',
        data2:{
          "order_parent_sn":'',
          "spec_id":'',
        },
        Add:[],
        address:[],
        kuaidi:'',
        order:[],
        goods_image:'',
        img:'',
        name:'',
        phone:'',
        consignee:'',
        IntegralRatio:'1',
        // order_parent_sn: this.$route.params.order_parent_sn,
      }
    },
    created(){
      console.log(this.openid,this.order_parent_sn);
      this.data.order_parent_sn = this.order_parent_sn;
      axios.get('/integral/orderDetails', {
      params: {
        'order_parent_sn':this.order_parent_sn,
        'openid':this.openid,
      },
    }).then(response =>{
      console.log(response.data);
      this.name = response.data.address.consignee;
      this.phone = response.data.address.phone_mob;
      this.consignee = response.data.address.address;
      this.kuaidi = response.data.kuaidi.data.invoice.message;
      this.DataList = response.data.list;
      this.data2.order_parent_sn = this.List.order_parent_sn;
      this.data2.spec_id = this.List.spec_id;
      console.log(this.List)
      }).catch(function (error) {
      console.log(error);
    });
    },
    methods:{

      },
    mounted(){
    }
  }
  function addStorage(addres,value){
    localStorage.removeItem(addres);
    localStorage.setItem(addres,value);
  }

  function removeStorage(addres){
    localStorage.removeItem(addres);
  }

  function getStorage(addres) {
    var storage = window.localStorage;
    var val = storage.getItem(addres);
    return val;
  }
</script>

<style scoped>
  #details{
    width: 100%;
    height: 100%;
    background-color: rgba(249, 249, 249, 1);
  }
  .pic{
    width: 100%;
    height: 15rem;
    /*background-color: #a22d0a;*/
    /*border-bottom: .01rem solid;*/
  }
  .head{
    overflow: hidden;
    width: 100%;
    height: 80%;
    /*background-color: #cccccc;*/
    display: flex;
    border-bottom: .01rem solid #dfdfdf;
  }
  .clss{
    width: 100%;
    height: 17rem;
    /*background-color: #a22d0a;*/
    overflow: hidden;
  }
</style>
